<template>
    <div>
        <a-table style="margin-top: 3%" :columns="columns" :data-source="this.$store.state.student.question_list" :pagination="false">
            <span slot="queContext" slot-scope="queContext" >
               <div class="htmlContent" v-html="queContext"/>
            </span>
            <span slot="level" slot-scope="level">
              <a-tag
                      :color="level === 3 ? 'volcano' : level === 2 ? 'geekblue' : 'green'"
              >
                {{ level === 3 ? '困难' : level === 2 ? '中等' : '简单' }}
              </a-tag>
            </span>
            <span slot="action" slot-scope="record">
                <a-popconfirm
                        title="确定要删除吗"
                        @confirm="()=>deleteRecord(record)"
                >
                    <a style="color: #ff0000">删除</a>
                </a-popconfirm>
                <a-divider type="vertical" />
                <a @click="()=>queInfo(record)">查看详情</a>
            </span>
        </a-table>
        <a-pagination style="margin-top: 7%" show-quick-jumper :pageSize=1 :default-current="1" :total=this.$store.state.student.question_list_total_page  @change="pageChange" />
<!--   题目详情模态窗 -->
        <a-modal v-model="ansModal" title="答案解析" @ok="ansModal=false">
            <p><b>知识点</b></p>
            <p style="margin-left: 2%">{{this.nowAnswer.point}}</p>
            <p><b>题目内容</b></p>
            <div style="margin-left: 2%" v-html="this.nowAnswer.content" />
            <p><b>答案</b></p>
            <div style="margin-left: 2%" v-for="(item,index) in this.nowAnswer.answer" v-bind:key="index" v-html="item.content"/>
<!--            <p style="margin-left: 2%" v-for="(item,index) in this.nowAnswer.answer" v-bind:key="index">{{item.content}}</p>-->
            <p><b>解析</b></p>
            <div style="margin-left: 2%" v-html="this.nowAnswer.analysis" />
        </a-modal>
    </div>
</template>

<script>
    const columns = [
        {
            title: '序号',
            dataIndex: 'qurRecNum',
            key: 'qurRecNum',
            scopedSlots: { customRender: 'qurRecNum' },
            width:'10%'
        },
        {
            title: '题目内容',
            dataIndex: 'queContext',
            key: 'queContext',
            width:'35%',
            scopedSlots: { customRender: 'queContext' },
            ellipsis: true,
        },{
            title: '题目难度',
            dataIndex: 'level',
            key: 'level',
            scopedSlots: { customRender: 'level' },
            width:'15%'
        },{
            title: '时间',
            dataIndex: 'time',
            key: 'time',
            width:'20%',
            ellipsis: true,

        },{
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
            width:'20%'
        },

    ];

    export default {
        name: "QuestionTable",
        props:{
            questionType:Number
        },
        data(){
            return({
                columns,
                defaultPageSize:8,
                nowoffset:0,
                ansModal:false,
                nowAnswer:{}
            })
        },
        methods:{
            pageChange(e){
                const questData= {
                    offset: this.defaultPageSize * (e===0?0:(e - 1)),
                    limit: this.defaultPageSize,
                    token:this.$store.state.login.token,
                    studentID:this.$store.state.login.student_id,
                    recordType:this.questionType
                };
                this.nowoffset = questData.offset
                this.$store.dispatch('student/getRecordsList',questData).then(
                    res => {
                        if(res.code === 0){
                            this.$message.error(res.msg);
                        }
                }).catch(()=>{
                    this.$message.error("网络异常")
                })
            },
            deleteRecord(e){
                const data = {
                    recordIDList:[e.queRecId],
                    token: this.$store.state.login.token,
                    getNewRecordInfo: {
                        offset:  this.nowoffset,
                        limit: this.defaultPageSize,
                        token:this.$store.state.login.token,
                        studentID:this.$store.state.login.student_id,
                        recordType:this.questionType
                    }
                }
                this.$store.dispatch('student/deleteRecord',data).then( data => {
                    if(data==null){
                        this.$message.error('网络异常');
                    }
                    if(data.code === 0){
                        this.$message.error(data.msg);
                    }else {
                        this.$message.success('删除成功');

                    }
                }).catch(()=>{
                    this.$message.error("hychry网络异常")
                })
            },
            queInfo(record){
                const quenID = record.quenID;
                this.$store.dispatch('student/getQuestion',quenID).then(
                    res=>{
                        if(res===null){
                            this.$message.error("网络异常");
                        }
                        if(res.code===1){
                            this.nowAnswer = res.data;
                            this.ansModal = true;
                        }else{
                            this.$message.error(res.msg);
                        }
                    }
                ).catch(()=>{
                    this.$message.error("网络异常")
                })
            }
        }
    }
</script>

<style scoped>
    .ant-table-tbody .htmlContent:hover {
        overflow: scroll;
    }

    .ant-table-tbody .htmlContent{
        max-height: 130px;
    }
</style>